<!-- 页面  -->
<template>
	<s-layout title="积分商城">
		<view class="ss-p-20">
			<view v-for="item in state.pagination.data" :key="item.id" class="ss-m-b-20">
				<s-score-card
					size="sl"
					:data="item"
					priceColor="#FF3000"
					@tap="$router.go('/pages/goods/score', { id: item.id })"
				></s-score-card>
			</view>
		</view>
		<s-empty
			v-if="state.pagination.total === 0"
			icon="/static/goods-empty.png"
			text="暂无积分商品"
		></s-empty>
		<uni-load-more
			v-if="state.pagination.total > 0"
			:status="state.loadStatus"
			:content-text="{
				contentdown: '上拉加载更多',
			}"
			@tap="loadmore"
		/>
	</s-layout>
</template>
<script setup>
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { reactive } from 'vue';
	import _ from 'lodash';
	import $router from '/shop/router/index.js';
	import $app from '/shop/api/app.js';

	const state = reactive({
		pagination: {
			data: [],
			currentPage: 1,
			totalPages: 1,
			totalCount: 0,
		},
		loadStatus: '',
	});
	async function getData(page = 1, list_rows = 5) {
		state.loadStatus = 'loading';
		let res = await $app.scoreShop.list({
			offset: (page - 1) * list_rows,
			limit: list_rows,
		});
		if (res.code === '0') {
			let couponlist = _.concat(state.pagination.data, res.data.datas);
			state.pagination = {
				...res.data,
				data: couponlist,
			};
			if (state.pagination.currentPage < state.pagination.totalPages) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}
	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getData(state.pagination.currentPage + 1);
		}
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadmore();
	});
	onLoad(() => {
		getData();
	});
</script>
